// Suspense 可以同时管理多个挂起的 Promise

// 所有挂起的 Promise 必须都 解析才能结束挂起状态

import { use, Suspense } from "react";
import PropTypes from "prop-types";

function fetchData(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms.toString());
    }, ms);
  });
}

// 组件 一
function AsyncComponent({ data }) {
  const result = use(data);
  return <div>AsyncComponent:{result}</div>;
}

AsyncComponent.propTypes = {
  data: PropTypes.object.isRequired,
};

// 组件 二
function AnotherAsyncComponent({ data }) {
  const result = use(data);
  return <div>AnotherAsyncComponent:{result}</div>;
}
AnotherAsyncComponent.propTypes = {
  data: PropTypes.object.isRequired,
};

// Suspense 可以同时管理多个挂起的 Promise

// 所有挂起的 Promise 必须都 解析才能结束挂起状态

function App() {
  console.time("cost");
  const data1 = fetchData(5000);
  const data2 = fetchData(10000);
  return (
    <Suspense fallback={<p>loading...</p>}>
      {/* 组件 一 */}
      <AsyncComponent data={data1}></AsyncComponent>
      {/* 组件 二 */}
      <AnotherAsyncComponent data={data2}></AnotherAsyncComponent>
    </Suspense>
  );
}
export default App;
//异步调用接口获取返回的数据进行渲染
